<template>
  <div class="ele-body">
    <div class="gqwe51">
      <i class="el-icon-warning" style="margin-top: 3px"></i>&nbsp;
      如果发现有激活失败的买家信息，请及时确定是否有漏单，或者导入订单不及时，导致买家订单号找不到激活失败。问题处理后可及时邮箱联系买家让其重新激活即可。
    </div>
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        label-width="77px"
        class="ele-form-search"
        @keyup.enter.native="reload"
        @submit.native.prevent>

        <span>筛选</span>&nbsp;
        <el-select style="width: 150px" clearable class="form_width" v-model="where.search_field">
          <el-option v-for="(item,index) in searchInfo.search_field_list" :key="index" :label="item"
                     :value="index"/>
        </el-select> &nbsp;&nbsp;
        <el-input
          clearable
          style="width: 220px"
          v-model="where.search_value"
          placeholder="多个请用;隔开"/>&nbsp;&nbsp;

        <span>IP</span>&nbsp;
        <el-input
          clearable
          style="width: 220px"
          v-model="where.ip"
          placeholder="请输入IP"/>&nbsp;&nbsp;



        <span>激活时间</span>&nbsp;
        <el-date-picker
          v-model="where.activate_time"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00']">
        </el-date-picker>&nbsp;&nbsp;
        <br/>
        <br/>
        <span>访问链接</span>&nbsp;
        <el-input
          clearable
          style="width: 220px"
          v-model="where.referrer"
          placeholder="请输入访问链接"/>&nbsp;&nbsp;
<!--        <span>国家</span>&nbsp;-->
<!--        <el-select style="width: 180px" clearable class="form_width" v-model="where.country">-->
<!--          <el-option v-for="(item,index) in searchInfo.country_list" :key="index" :label="item"-->
<!--                     :value="index"/>-->
<!--        </el-select>&nbsp;&nbsp;-->

        <el-button
          type="primary"
          icon="el-icon-search"
          class="ele-btn-icon"
          @click="reload">查询
        </el-button>
        <el-button @click="reset">重置</el-button>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :where="where"
        :datasource="url"
        :columns="columns"
        :selection.sync="selection"
        height="calc(100vh - 405px)">
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button
            type="button"
            class="el-button el-button--default el-button--medium"
            icon="el-icon-share"
            @click="processedBatch">批量已处理
          </el-button>
          <el-button
            size="small"
            type="primary"
            class="ele-btn-icon"
            @click="matchActivateSuccess">匹配激活成功
          </el-button>

          <el-button
            @click="exportData"
            type="primary"
            icon="el-icon-download"
            class="ele-btn-icon"
            size="small"
            v-if="permission.includes('sys:loginlog:export')">导出
          </el-button>

        </template>
        <!-- 操作列 -->
        <template slot="action" slot-scope="{row}">
          <el-popconfirm
            class="ele-action"
            title="确定要删除此记录吗？"
            @confirm="remove(row)">
            <el-link
              type="danger"
              slot="reference"
              :underline="false"
              icon="el-icon-delete"
              v-if="permission.includes('sys:activatefailed:delete')">删除
            </el-link>
          </el-popconfirm>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-message"
            @click="sendEmail(row)"
            v-if="permission.includes('sys:activatefailed:edit')">发送邮件
          </el-link>
        </template>
        <template slot="name" slot-scope="{row}">
          <span>{{ row.name }}</span>
          <br/>
          <span v-html="row.email" style="color: #05b15a;cursor: pointer" title="点击复制邮箱"
                @click="copyEmail(row.email)"></span>
        </template>
        <template slot="referrer" slot-scope="{row}">
          <span>{{ row.record_list.referrer }}</span>
        </template>
        <template slot="order_id" slot-scope="{row}">
          <span >{{ row.order_id }}</span>
        </template>
        <template slot="remarks" slot-scope="{row}">
          <el-input
            v-model="row.remarks"
            placeholder=""
            :rows="1"
            @change="submitRemarks(row.id,row.remarks)"
            type="textarea"/>
        </template>
        <template slot="ip_country" slot-scope="{row}">
          <el-popover
            placement="top-start"
            width="300"
            trigger="click">
            <el-form
              ref="form"
              label-width="82px">
              <el-form-item label="IP：">
                {{row.record_list.ip}}
              </el-form-item>
              <el-form-item label="国家：">
                {{row.record_list.country}}
              </el-form-item>
              <el-form-item label="平台：">
                {{row.record_list.visitors_platform}}
              </el-form-item>
              <el-form-item label="浏览器：">
                {{row.record_list.browser}}
              </el-form-item>
              <el-form-item label="访问设备：">
                <span v-if="row.record_list.is_mobile==1">移动端</span>
                <span v-else>PC端</span>
              </el-form-item>
              <el-form-item label="访问域名：">
                {{row.record_list.referrer}}
              </el-form-item>
            </el-form>
            <span slot="reference" style="color: #05b15a;text-decoration: underline;cursor: pointer" title="查看详情"
                  @click="openDetail(row)">{{ row.record_list.ip }}</span>
          </el-popover>
          <br/>
          {{row.record_list.country}}
        </template>
        <!-- 是否处理 -->
        <template slot="processed_status" slot-scope="{row}">
          <el-switch
            v-model="row.processed_status"
            @change="editProcessedStatus(row)"
            active-color="#13ce66"
            inactive-color="#ff4949"/>
        </template>
      </ele-pro-table>
    </el-card>

    <activate-detail
      v-if="showDetail"
      @close="showDetail=false"
      :data="current"
      :visible="showDetail"
      ref="activateRef"
      @done="closeDetail"/>

    <!-- 发送邮件 -->
    <send-email
      :data="current"
      :visible.sync="showSendEmail"
      ref="sendEmailRef"
      @done="reload"/>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import SendEmail from "@/views/orderandcustomers/send-email";
import XLSX from "xlsx";

export default {
  name: 'ActivateFailed',
  components: {SendEmail},
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      showViewer: false,//打开预览/关闭
      // 表格数据接口
      url: '/activate/index?progress_activate=3',
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: "left"
        },
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 60,
          align: 'center',
          showOverflowTooltip: true,
          fixed: "left"
        },
        {
          prop: 'activate_time',
          label: '激活(北京)时间',
          minWidth: 130,
          align: 'center',
        },
        {
          columnKey: 'name',
          label: '姓名/邮箱',
          align: 'center',
          minWidth: 150,
          slot: 'name'
        },
        {
          prop: 'order_id',
          label: '订单号',
          minWidth: 130,
          align: 'center',
          slot: 'order_id'
        },
        {
          prop: 'referrer',
          label: '访问链接',
          minWidth: 220,
          align: 'center',
          slot: 'referrer'
        },
        {
          prop: 'ip_country',
          label: 'IP/国家',
          minWidth: 130,
          align: 'center',
          slot: 'ip_country'
        },
        {
          prop: 'processed_status',
          label: '是否处理',
          align: 'center',
          width: 80,
          resizable: false,
          slot: 'processed_status',
        },
        {
          prop: 'remarks',
          label: '备注',
          minWidth: 170,
          align: 'center',
          slot: 'remarks'
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 150,
          align: 'center',
          resizable: false,
          slot: 'action',
          fixed: "right"
        }
      ],
      // 表格搜索条件
      where: {
        search_field:'order_id'
      },
      // 表格选中数据
      selection: [],
      //搜索下拉数据
      searchInfo: {},
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showDetail: false,
      showSendEmail: false,
    };
  },
  mounted() {
    //获取查询条件配置
    this.activateConfig();
  },
  methods: {
    closeViewer() { //关闭
      this.showViewer = false
    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },
    /* 导出数据 */
    exportData() {

      var ass = this.where;
      ass.page=1;
      ass.limit=50000;

      let array = [['激活(北京)时间', '姓名', '邮箱', '订单号', '访问链接', 'ip', '国家','备注']];
      const loading = this.$loading({lock: true});
      this.$http.get(this.url,{
        params:ass
      }).then(res => {
        loading.close();
        if (res.data.code === 0) {
          res.data.data.forEach(d => {
            array.push([
              d.activate_time,
              d.name,
              d.email,
              d.order_id,
              d.record_list.referrer,
              d.record_list.ip,
              d.record_list.country,
              d.remarks,
            ]);
          });
          this.$util.exportSheet(XLSX, array, '激活失败管理');
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        loading.close();
        this.$message.error(e.message);
      });
    },
    //匹配激活成功
    matchActivateSuccess()
    {

      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }

      this.$http.post('/activate/matchActivateSuccess', {ids: this.selection.map(d => d.id)}).then(res => {
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          this.reload();
        } else {
          this.$message({
            dangerouslyUseHTMLString: true,
            showClose: true,
            message:res.data.msg,
            type: 'error',
            duration: 0
          })
          // this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    closeDetail() {
      this.showDetail = false;
    },
    //获取查询条件配置
    activateConfig() {
      this.$http.get('/activate/activateConfig', this.form).then((res) => {
        this.loading = false;
        if (res.data.code === 0) {
          this.searchInfo = res.data.data;
        } else {
          this.$message({type: 'error', message: res.data.msg, offset: 160});
        }
      });
    },
    editProcessedStatus(row) {
      const loading = this.$loading({lock: true});
      let params = Object.assign({
        "id": row.id,
        "processed_status": row.processed_status
      })
      this.$http.post('/activateException/processedStatus', params).then(res => {
        loading.close();
        if (res.data.code === 0) {
          this.$message({type: 'success', message: res.data.msg});
        } else {
          row.processed_status = !row.processed_status ? 1 : 2;
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        loading.close();
        this.$message.error(e.message);
      });
    },
    //批量已处理
    processedBatch() {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      this.$confirm('确定要批量已处理吗?', '提示', {
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({lock: true});
        this.$http.post('/activateException/processedStatusBatch', {ids: this.selection.map(d => d.id)}).then(res => {
          loading.close();
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          loading.close();
          this.$message.error(e.message);
        });
      }).catch(() => {
      });
    },
    /* 手动结束进度 */
    handEndProgress(id) {
      this.$confirm('您已核实确认客户实际已留评??', '注意', {
        type: 'warning'
      }).then(() => {
        this.$http.post('/activate/handEndProgress', {id: id}).then(res => {
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          this.$message.error(e.message);
        });
      }).catch(() => {
      });
    },
    /* 重置搜索 */
    reset() {
      this.where = {};
      this.reload();
    },
    copyEmail(email) {
      this.$copyText(email);
    },
    //修改备注
    submitRemarks(id, remarks) {
      this.$http.post('/activate/submitRemarks', {id: id, remarks: remarks}).then(res => {
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          this.reload();
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    //查看详情
    openDetail(row) {
      this.current = row;
      this.showDetail = true;
    },
    /*发送邮件弹窗*/
    sendEmail(row) {
      this.current = row;
      this.$refs.sendEmailRef.setActivateIds([row.id]);
      this.showSendEmail = true;
    },
    /* 删除 */
    remove(row) {
      const loading = this.$loading({lock: true});
      this.$http.post('/activate/delete', {id: row.id}).then(res => {
        loading.close();
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          this.reload();
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        loading.close();
        this.$message.error(e.message);
      });
    },
    /* 批量删除 */
    removeBatch() {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      this.$confirm('确定要删除选中的数据吗?', '提示', {
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({lock: true});
        this.$http.post('/activate/delete', {id: this.selection.map(d => d.id)}).then(res => {
          loading.close();
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          loading.close();
          this.$message.error(e.message);
        });
      }).catch(() => {
      });
    },
    /* 更改状态 */
    editStatus(row) {
      const loading = this.$loading({lock: true});
      let params = Object.assign({
        "id": row.id,
        "status": row.status
      })
      this.$http.post('/activate/status', params).then(res => {
        loading.close();
        if (res.data.code === 0) {
          this.$message({type: 'success', message: res.data.msg});
        } else {
          row.status = !row.status ? 1 : 2;
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        loading.close();
        this.$message.error(e.message);
      });
    }
  }
}
</script>

<style scoped>

.gqwe51 {
  background-color: rgb(255, 242, 230);
  font-size: 14px;
  color: rgb(255, 124, 0);
  display: flex;
  padding: 15px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(255, 225, 196);
  border-image: initial;
}

::v-deep .el-form-item--medium .el-form-item__content, ::v-deep .el-form-item--medium .el-form-item__label{
  line-height: 13px;
}

</style>
